<template>
  <div class="comment" v-if="comment">
    <div class="top">
      <van-image
        class="header"
        width="40"
        height="40"
        round
        :src="comment.u.p"
      />
      <div class="usermsg">
        <div class="name">
          <p>
            <span>{{ comment.u.n }}</span
            ><i class="lv">LV.{{ comment.u.lvl }}</i>
          </p>
          <div class="like">
            <img
              src="../assets/images/love .png"
              v-if="isLike"
              @click="toggleLike"
            />
            <img src="../assets/images/unlove.png" v-else @click="toggleLike" />
            <p class="ilike" v-if="isLike">
              {{ comment.like_count == 0 ? 1 : comment.like_count * 1 + 1 }}
            </p>
            <p v-else>
              {{ comment.like_count == 0 ? "赞" : comment.like_count }}
            </p>
          </div>
        </div>
        <div v-if="comment.at" :style="{ color: comment.ac }">
          {{ comment.at }}
        </div>
      </div>
    </div>
    <div class="content">
      <p class="commentContent">{{ comment.content[0].c }}</p>
      <div class="otherComments" v-if="comment.ccc">
        <div
          class="otherUser"
          v-for="(item, index) in comment.child_comments"
          :key="index"
        >
          <p>
            <span class="username"
              >{{ item.u.n }}
              <span v-if="author == item.u.id">(作者)</span>
            </span>
            <span v-show="comment.u.id != item.reply_user.id">回复</span>
            <span
              class="username"
              v-show="comment.u.id != item.reply_user.id"
              >{{ item.reply_user.n }}</span
            >
            <span class="usercontent">{{ item.content[0].c }}</span>
          </p>
        </div>
        <p class="all_reply" v-if="comment.ccc>1">共{{comment.ccc}}条回复</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["author", "comment"],
  data() {
    return {
      isLike: false,
    };
  },
  methods: {
    toggleLike: function () {
      this.isLike = !this.isLike;
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  margin: 15px;
  margin-bottom: 25px;
  width: 85%;
  font-size: 14px;
  .top {
    display: flex;
    align-items: center;
    .header {
      margin-right: 5px;
    }
    .usermsg {
      flex: 1;
      .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          span {
            font-weight: bold;
          }
          .lv {
            font-weight: bold;
            color: #ec8d19;
            display: inline-block;
            transform: scale(0.7);
          }
        }
        .like {
          width: 5vw;
          display: flex;
          justify-content: space-between;
          img {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 5px;
          }
          .ilike {
            color: #e2483c;
          }
        }
      }
    }
  }
  .content {
    margin: 5px;
    margin-left: 50px;
    .otherComments {
      margin-top: 10px;
      background-color: #fafafa;
      padding: 10px;
      border-radius: 5px;
      .all_reply{
        color: #8a8787;
        margin-top: 10px;
      }
      .otherUser {
        .username {
          margin: 0 8px;
          font-weight: bold;
          &:nth-child(1) {
            margin-left: 0;
          }
        }
        .usercontent{
          line-height: 23px;
        }
        .usercontent::before {
          content: ":";
          font-weight: bold;
        }
      }
    }
  }
}
</style>
